<template>
	<view class="">
		<view class="home-search flex a-c">
			<image src="/static/home/home-search.png" mode="widthFix" class="icon-25" />
			<input type="text" class="f1" v-model="search" placeholder="搜索关键词" placeholder-class="p-c" @confirm="getList">
		</view>
		
		<view class="" v-for="(v,i) in list" :key="i">
			<block v-if="v.activity === 0">
				<gameItem :item="v"></gameItem>
			
			</block>
			<view v-else-if="v.activity !== 0 && v.activity !== 6 " style="margin: 0 27rpx;">
				<productList :list="[v]" :noMoreData="noMoreData"></productList>
			</view>
			<block v-else-if="v.activity === 6"></block>
		</view>
		<view style="text-align: center;margin-top: 10vh;" v-if="list.length==0">
			<image style="width: 200rpx;height: 200rpx;" src="../../static/nodata.png"></image>
			<view style="color: #999;text-align: center;">{{text}}</view>
		</view>
		<view style="text-align: center;color: #999;margin-bottom: 50rpx;font-size: 24rpx;"
			v-if="noMoreData&&list.length!=0">
			没有更多啦
		</view>
	</view>
</template>

<script>
	import productList from "@/components/productList/productList.vue"
	import gameItem from "@/components/gameItem.vue"
	export default {
		components: {
			productList,
			gameItem,
			
		},
		data() {
			return {
				text:'尝试搜索一下吧~',
				search: '',
				limit: 10,
				page: 1,
				totalPage: 1,
				list: [],
				noMoreData: false,
			}
		},
		onReachBottom() {
			if (this.page < this.lastPage) {
				this.page += 1
				this.getList()
			} else {
				this.noMoreData = true
			}
		},
		methods: {
			async getList() {
				const res = await this.$api.get('search',{
					search: this.search,
					limit: this.limit,
					page: this.page,
				});
				if(res.code == 200) {
					if(this.page == 1) {
					
						this.list = res.data.list;
						this.totalPage = res.data.totalPage;
						if(this.list.length==0){
							this.text='暂无数据'
						}
						
					}else {
						this.list.push(...res.data.list);
					}
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}
</style>

<style lang="scss" scoped>
	.home-search {
		border-radius: 7rpx;
		padding: 16rpx 30rpx;
		background-color: #FFF;
		margin: 27rpx;
	
		.icon-25 {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	
		input {
			font-size: 27rpx;
		}
	}
	
</style>